<div class="support-wrapper">
    <div class="pay-wrapper">
        <img src="assets/img/home/pay-zhifubao.jpg" alt="支付宝" />
        <img src="assets/img/home/pay-weixin.png" alt="微信收钱" />
    </div>

    <mat-card>
        <mat-card-content>
            <mat-form-field *ngIf="supportList">
                <mat-label>请选择对应的时间段</mat-label>
                <mat-select
                    [(ngModel)]="currentLink"
                    (selectionChange)="onSelectLink()"
                >
                    <mat-option
                        *ngFor="let supports of supportList"
                        [value]="supports.title"
                    >
                        {{ supports.title }}
                    </mat-option>
                </mat-select>
            </mat-form-field>

            <mat-radio-group
                [(ngModel)]="currentType"
                (change)="onSelectLink()"
            >
                <mat-radio-button value="income_details"
                    >收入 ( RMB: {{ currentIncome }} )</mat-radio-button
                >
                <mat-radio-button value="expense_details"
                    >支出 ( RMB: {{ currentExpense }} )</mat-radio-button
                >
            </mat-radio-group>

            <app-loading [loading]="loading"></app-loading>
            <table
                mat-table
                [dataSource]="dataSource"
                *ngIf="!loading && currentType === 'income_details'"
            >
                <!-- name Column -->
                <ng-container matColumnDef="name">
                    <th mat-header-cell *matHeaderCellDef>Name</th>
                    <td mat-cell *matCellDef="let element">
                        {{ element.name }}
                    </td>
                </ng-container>

                <!-- from Column -->
                <ng-container matColumnDef="from">
                    <th mat-header-cell *matHeaderCellDef>From</th>
                    <td mat-cell *matCellDef="let element">
                        {{ element.from }}
                    </td>
                </ng-container>

                <!-- RMB Column -->
                <ng-container matColumnDef="rmb">
                    <th mat-header-cell *matHeaderCellDef>RMB</th>
                    <td mat-cell *matCellDef="let element">
                        {{ element.rmb }}
                    </td>
                </ng-container>

                <!-- time Column -->
                <ng-container matColumnDef="time">
                    <th mat-header-cell *matHeaderCellDef>Time</th>
                    <td mat-cell *matCellDef="let element">
                        {{ element.time }}
                    </td>
                </ng-container>

                <!-- msg Column -->
                <ng-container matColumnDef="msg">
                    <th mat-header-cell *matHeaderCellDef>Message</th>
                    <td mat-cell *matCellDef="let element">
                        {{ element.msg }}
                    </td>
                </ng-container>

                <tr
                    mat-header-row
                    *matHeaderRowDef="displayedIncomeColumns"
                ></tr>
                <tr
                    mat-row
                    *matRowDef="let row; columns: displayedIncomeColumns"
                ></tr>
            </table>

            <table
                mat-table
                [dataSource]="dataSource"
                *ngIf="!loading && currentType === 'expense_details'"
            >
                <!-- cost Column -->
                <ng-container matColumnDef="cost">
                    <th mat-header-cell *matHeaderCellDef>Cost</th>
                    <td mat-cell *matCellDef="let element">
                        {{ element.cost }}
                    </td>
                </ng-container>

                <!-- item Column -->
                <ng-container matColumnDef="item">
                    <th mat-header-cell *matHeaderCellDef>Item</th>
                    <td mat-cell *matCellDef="let element">
                        {{ element.item }}
                    </td>
                </ng-container>

                <!-- note Column -->
                <ng-container matColumnDef="note">
                    <th mat-header-cell *matHeaderCellDef>Note</th>
                    <td mat-cell *matCellDef="let element">
                        {{ element.note }}
                    </td>
                </ng-container>

                <tr
                    mat-header-row
                    *matHeaderRowDef="displayedExpenseColumns"
                ></tr>
                <tr
                    mat-row
                    *matRowDef="let row; columns: displayedExpenseColumns"
                ></tr>
            </table>
        </mat-card-content>
    </mat-card>
</div>
